import React, { Component } from 'react'
import { Card, Carousel } from 'antd'

class Carousels extends Component {
    render() {
        return (
            <div className="carousel-wrap">
                <Card title="图片轮播" className="card-pic-item">
                    <Carousel autoplay effect="fade">
                        <div>
                            <img src="/assets/carousel-img/carousel-1.jpg" alt="" />
                        </div>
                        <div>
                            <img src="/assets/carousel-img/carousel-2.jpg" alt="" />
                        </div>
                        <div>
                            <img src="/assets/carousel-img/carousel-3.jpg" alt="" />
                        </div>
                    </Carousel>
                </Card>
                <Card title="文字背景轮播" className="card-text-item">
                    <Carousel>
                        <div><h1>Hi，海洋</h1></div>
                        <div><h1>少女芳心重火犯</h1></div>
                        <div><h1>撒比宁</h1></div>
                    </Carousel>
                </Card>
                <Card title="垂直轮播" className="card-text-item">
                    <Carousel vertical>
                        <div><h1>Hi，海洋</h1></div>
                        <div><h1>少女芳心重火犯</h1></div>
                        <div><h1>撒比宁</h1></div>
                    </Carousel>
                </Card>
                <Card title="自动轮播" className="card-text-item">
                    <Carousel autoplay>
                        <div><h1>Hi，海洋</h1></div>
                        <div><h1>少女芳心重火犯</h1></div>
                        <div><h1>撒比宁</h1></div>
                    </Carousel>
                </Card>

            </div>
        )
    }
}


export default Carousels
